// 入口函数
$(function () {
  /* 一、固定导航 */
  ;(function () {
    // 1.滚动事件
    const n = $('nav').offset().top

    $(window).scroll(scrollFn)

    // 2.鼠标移入移出点击，导航栏

    $('nav ul').on('click', 'li', function () {
      // 优化2：点击触发滚动事件
      // 每次点击解绑滚动事件，三秒后再次绑定
      let timeId
      if (timeId) clearInterval(timeId)
      $(window).off('scroll')
      timeId = setInterval(() => {
        $(window).scroll(scrollFn)
      }, 3000)

      // (1)样式改变
      $(this).addClass('current').siblings().removeClass('current')
      // (2)滚动到对应的位置
      const i = $(this).index()
      console.log(i)
      console.log('section'[i].offsetTop)
      $('html').scrollTop($('section')[i].offsetTop).slideDown()
    })

    // 页面滚动事件
    function scrollFn() {
      // (1)导航栏固定在页面头部（吸顶效果）
      if ($('html').scrollTop() >= n) {
        $('nav').addClass('active')
      } else {
        $('nav').removeClass('active')
      }

      // (2)随着页面滚动距离变化，导航栏的样式改变
      Array.from($('section')).forEach(function (item, i) {
        if ($('html').scrollTop() >= item.offsetTop) {
          $('nav li').removeClass('current')
          $('nav li')[i].classList.add('current')
        }
      })
    }
  })()

  /* 二、时间轴 */
  ;(function () {
    // 获取数据
    // console.log(timeData)  // 检测是否获取数据
    // 1.动态渲染数据
    // 时间轴
    $('.developing .time').html(
      timeData
        .map(({ year }, i) => {
          if (i === 0) return `<li class="current"><span>${year}</span></li>`
          return `<li><span>${year}</span></li>`
        })
        .join('')
    )
    // 内容
    const html = $('.developing .content').html()
    $('.developing .content').html(
      html +
        timeData
          .map(({ year, event }, i) => {
            let str = ''
            event.forEach(({ month, txt }, i) => {
              str += `
              <div class="item">
                <span class="month">${month}</span>
                <i>/</i>
                <p>${txt}</p>
              </div>
              `
            })
            return `
            <div class="right">
              <p class="year">${year}</p>
              <div class="event">${str}</div>
            </div>
            `
          })
          .join('')
    )
    $('.developing .content .right').eq(0).addClass('current')

    // 2.点击时间轴
    $('.developing .timeLine .time').on('click', 'li', function () {
      // (1)年样式变化
      $(this).addClass('current').siblings().removeClass('current')
      const i = $(this).index()
      let left = ($(this).parents('.timeLine').width() - $(this).width()) / 2
      left -= $(this).width() * i
      $(this).parent().css('left', left)

      // (2)内容对应改变
      $('.developing .content .right')
        .eq(i)
        .addClass('current')
        .siblings()
        .removeClass('current')
    })
  })()

  /* 三、企业荣誉 */
  ;(function () {
    $('.honor a').hover(function () {
      $(this).toggleClass('current')
    })
  })()

  /* 四、管理团队 */
  ;(function () {
    // 动态渲染数据
    const item = $('.managerTeam .content .item')
    const lines = $('.managerTeam .content-line')

    Array.from(item).forEach(function (item, i) {
      item.innerHTML = `
      <a href="javascript:;">
        <div class="fl">
          <p class="name">${managerTeam[i].name}</p>
          <p class="desc">${managerTeam[i].desc}</p>
          <img
            class="btn-arrow btn-arrow-current"
            src="./uploads/10026.png"
            alt=""
          />
          <img class="btn-arrow" src="./uploads/10025.png" alt="" />
        </div>
        <div class="fr">
        <img src=${managerTeam[i].pic} alt="" /></div>
      </a>
      `
    })

    Array.from(lines).forEach(function (item, i) {
      const c = i % 2 === 0 ? 'left' : 'right'
      const str = managerTeam[i].descript
        .map(function (item, i) {
          return `<p>${item}</p>`
        })
        .join('')
      item.innerHTML = `
      <div class="found clearfix">
        <div class="found-list ${c}">
          <img src=${managerTeam[i].pic1} alt="" />
          <p class="name">${managerTeam[i].name}</p>
          <p class="desc">${managerTeam[i].desc}</p>
          <div class="descript">${str}</div>
          <div class="close">
            <img src="./uploads/10021.png" alt="">
            <img class="btn-current" src="./uploads/10022.png" alt="">
          </div>
        </div>
      </div>
      `
    })

    // 移入移出
    $('.managerTeam .content .item a').hover(hoverFn)

    // 遍历所有a添加点击事件
    item.click(function () {
      if ($(this).find('.fr').css('opacity') === '1') {
        // (1)小盒子样式变化
        // 排他思想，所有重置，当前添加
        item
          .children()
          .removeClass('current')
          .find('.fr,.btn-arrow')
          .css({ opacity: 1, transition: 'none' })
        $(this)
          .children()
          .toggleClass('current')
          .find('.fr,.btn-arrow')
          .css('opacity', 0)

        // (2)点击大盒子显示
        item.siblings('.content-box').hide().children().css('opacity', 0)

        let i = $(this).hasClass('left') ? 0 : 1
        $(this)
          .siblings('.content-box')
          .show()
          .children()
          .eq(i)
          .css('opacity', 1)
      } else {
        // 再次点击重置样式
        $(this)
          .children()
          .removeClass('current')
          .find('.fr,.btn-arrow')
          .css('opacity', 1)

        // (2)点击大盒子收起
        $(this).siblings('.content-box').slideUp()
      }
    })

    // 遍历所有的lines添加事件
    Array.from(lines).forEach(function (item, i) {
      lines.on('click', '.close', function () {
        // 内容区块隐藏
        $(item).parent().css('display', 'none')
        // a恢复初始状态
        $('.managerTeam .content .item a')
          .removeClass('current')
          .find('.fr,img')
          .css('opacity', 1)
      })
    })

    function hoverFn() {
      // 点击选中时，不能移入移出
      if ($(this).find('.fr').css('opacity') === '0') {
        return false
      }
      $(this).toggleClass('current')
    }
  })()

  /* 五、办公地点 */
  ;(function () {
    $('.address .address-line ul').html(
      address
        .map(function ({ address }, i) {
          return `
        <li>
          <a href="javascript:;">
            <b></b>
            ${address}
          </a>
        </li>
      `
        })
        .join('')
    )
    $('.address .address-line ul li').eq(0).addClass('current')

    $('.address .address-line .content').html(
      address.map(function ({ item }, i) {
        let str = ''
        item.forEach(function ({ title, event }) {
          str += `
            <p><strong>${title}</strong></p>
            <p>${event}</p>
            <p><br /></p>
            `
        })
        console.log(str)
        return `<div class="content-box">${str}</div>`
      })
    )
    $('.address .address-line .content-box').eq(0).addClass('current')

    // 点击切换
    // 点击解绑当前移入移出事件
    $('.address .address-line ul li').click(function () {
      $(this).off('mouseenter mouseleave')
      $(this).addClass('current').siblings().removeClass('current')

      $('.address .address-line .content-box')
        .eq($(this).index())
        .show()
        .siblings()
        .hide()
    })
  })()
})
